﻿@page "/blazor/examples/page-stack/page5"
@layout PageStackLayout
@inject PageStackNavController NavController

<MRow Justify=JustifyTypes.SpaceAround>
    <MCard Width="@("100%")" Tile Flat>
        <MImage Height="200" Src="https://cdn.pixabay.com/photo/2020/07/12/07/47/bee-5396362_1280.jpg">
            <MAppBar Flat Color="rgba(0, 0, 0, 0)">
                <MAppBarNavIcon Color="white" IconName="mdi-arrow-left"
                                OnClick="@(() => NavController.GoBack())" />
                <MToolbarTitle Class="text-h6 white--text pl-0"> Messages</MToolbarTitle>
                <MSpacer></MSpacer>
                <MButton Color="white" IconName="mdi-dots-vertical" />
            </MAppBar>

            <MCardTitle Class="white--text mt-8">
                <MAvatar Size=56>
                    <MImage Src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg"></MImage>
                </MAvatar>
                <p class="ml-3">
                    John Doe
                </p>
            </MCardTitle>
        </MImage>

        <MCardText>
            <div class="font-weight-bold ml-8 mb-2">
                Today
            </div>
            <MTimeline AlignTop Dense>
                @foreach (var message in _messages)
                {
                    <MTimelineItem key="@message.Time" Color="@message.Color" Small>
                        <div>
                            <div class="font-weight-normal">
                                <strong>@message.From</strong>@message.Time
                            </div>
                            <div>@message.Message</div>
                        </div>
                    </MTimelineItem>
                }
            </MTimeline>
        </MCardText>

    </MCard>
</MRow>

@code {

    MessageDto[] _messages = new[]
    {
        new MessageDto
        {
            From = "You",
            Message = "Sure, I'll see you later.",
            Time = "10:42am",
            Color = "deep-purple lighten-1"
        },
        new MessageDto
        {
            From = "John Doe",
            Message = "Yeah, sure. Does 1:00pm work?",
            Time = "10:37am",
            Color = "green"
        },
        new MessageDto
        {
            From = "You",
            Message = "Did you still want to grab lunch today?",
            Time = "9:47am",
            Color = "deep-purple lighten-1"
        }
    };

    class MessageDto
    {
        public string From { get; set; }
        public string Message { get; set; }
        public string Time { get; set; }
        public string Color { get; set; }
    }

}